// 危大工程详情

<template>
    <f7-page class="add">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>危大工程详情</f7-nav-title>
            <f7-nav-right>
                <f7-icon f7="house"
                         @click.native="fnToHome()"></f7-icon>
            </f7-nav-right>
        </f7-navbar>

        <van-notice-bar background="#fff"
                        color="#345">
            <f7-icon solt="left-icon"
                     color="#3385ff"
                     f7="layers_alt_fill"></f7-icon>
            <span>{{models.engineeInfo.engineeName}}</span>
        </van-notice-bar>

        <!-- 不涉及 -->
        <template v-if="models.model.isDanger == 0">
            <f7-list media-list
                     class="space-between">
                <f7-list-item>
                    <div class="list-item-content textarea-item">
                        <label>不涉及原因</label>
                        <van-field v-model="models.model.notDangerReason"
                                   type="textarea"
                                   border
                                   readonly
                                   placeholder="不涉及原因" />
                    </div>
                </f7-list-item>
            </f7-list>
        </template>
        <!-- 不涉及 end -->

        <template v-else>
            <div class="shzt fff">
                <label>基坑支护</label>
            </div>

            <f7-list media-list
                     class="space-between">
                <f7-list-item>
                    <div class="list-item-content">
                        <label>类型</label>
                        <span>{{models.model.isDanger | DictItem(controlData.dangerTypeEnums)}}</span>
                    </div>
                </f7-list-item>
                <!-- <f7-list-item v-if="models.model.isDanger == 2">
                    <div class="list-item-content">
                        <label>风险等级</label>
                        <span>{{models.model.riskLevelName}}</span>
                    </div>
                </f7-list-item> -->
                <f7-list-item>
                    <div class="list-item-content">
                        <label>名称</label>
                        <span>{{models.model.module}}</span>
                    </div>
                </f7-list-item>
                <f7-list-item>
                    <div class="list-item-content">
                        <label>类别</label>
                        <span>{{models.model.riskTypeName}}</span>
                    </div>
                </f7-list-item>

                <template v-for="(item, index) in models.valueList">
                    <f7-list-item :key="index">
                        <template v-if="item.filedType == 'input'">
                            <div class="list-item-content">
                                <label>{{item.surveyName}}</label>
                                <span>{{item.value}}</span>
                            </div>
                        </template>

                        <template v-if="item.filedType == 'checkbox'">
                            <div class="list-item-content">
                                <label>{{item.surveyName}}</label>
                                <span>{{fnCheckboxText(item, models.valueList)}}</span>
                            </div>
                        </template>
                    </f7-list-item>
                </template>

                <f7-list-item>
                    <div class="list-item-content">
                        <label>施工状态</label>
                        <span>{{models.model.riskStatusName}}</span>
                    </div>
                </f7-list-item>
                <f7-list-item>
                    <div class="list-item-content">
                        <label>计划开工日期</label>
                        <span>{{models.model.startDate}}</span>
                    </div>
                </f7-list-item>
                <f7-list-item>
                    <div class="list-item-content">
                        <label>计划完工日期</label>
                        <span>{{models.model.endDate}}</span>
                    </div>
                </f7-list-item>
            </f7-list>

            <van-field label="施工方案"
                       class="file-field"
                       input-align="left">
                <qm-file-upload title="施工方案"
                                slot="input"
                                disabled
                                :galleryOptions="{ multiple: true, maximum: 9 }"
                                :params="{type:'attach', dataKey: models.model.riskListId, bizType: 'riskList_plan'}">
                </qm-file-upload>
            </van-field>

            <van-field v-if="models.model.isDanger == 2"
                       label="论证报告"
                       class="file-field"
                       input-align="left">
                <qm-file-upload slot="input"
                                disabled
                                :galleryOptions="{ multiple: true, maximum: 9 }"
                                :params="{type:'attach', dataKey: models.model.riskListId, bizType: 'riskList_report'}">
                </qm-file-upload>
            </van-field>
        </template>

        <f7-list media-list
                 class="space-between">
            <f7-list-item>
                <div class="list-item-content">
                    <label>登记人</label>
                    <span>{{models.model.createUserName}}</span>
                </div>
            </f7-list-item>
            <f7-list-item>
                <div class="list-item-content">
                    <label>登记单位</label>
                    <span>{{models.model.createOrgName}}</span>
                </div>
            </f7-list-item>
            <f7-list-item>
                <div class="list-item-content">
                    <label>登记日期</label>
                    <span>{{models.model.createTime}}</span>
                </div>
            </f7-list-item>
        </f7-list>

        <f7-list media-list
                 class="space-between"
                 v-if="pageAction == 'view'">
            <f7-list-item>
                <div class="list-item-content">
                    <label>审核人</label>
                    <span>{{models.model.auditUserName}}</span>
                </div>
            </f7-list-item>
            <f7-list-item>
                <div class="list-item-content">
                    <label>审核结果</label>
                    <span>{{models.model.auditStatus | DictItem(controlData.auditStatusEnums)}}</span>
                </div>
            </f7-list-item>
            <f7-list-item>
                <div class="list-item-content">
                    <label>审核意见</label>
                    <span>{{opinion}}</span>
                </div>
            </f7-list-item>
            <f7-list-item>
                <div class="list-item-content">
                    <label>审核单位</label>
                    <span>{{models.model.auditOrgName}}</span>
                </div>
            </f7-list-item>
            <f7-list-item>
                <div class="list-item-content">
                    <label>审核日期</label>
                    <span>{{models.model.auditTime}}</span>
                </div>
            </f7-list-item>
        </f7-list>

        <template v-if="pageAction != 'view'">
            <f7-toolbar position="bottom"
                        v-has="'risk:riskList:save'"
                        no-shadow
                        class="fff">
                <f7-button fill
                           class="submit-btn red"
                           @click="fnSubmit(3)">不通过</f7-button>
                <f7-button fill
                           class="submit-btn"
                           @click="fnSubmit(2)">通过</f7-button>
            </f7-toolbar>
        </template>

        <!-- 审核意见 -->
        <v-popup-opinion v-model="showoPinion"
                         :selectUser="selectUser"
                         @save="emitSave">
        </v-popup-opinion>
        <!-- 审核意见 end -->
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController"

export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: '/risk/riskList/getWorkflowViewModel'
        }
    }
    mixin () {
        return {
            data () {
                return {
                    models: {
                        model: {},
                        engineeInfo: {},
                        valueList: []
                    },
                    controlData: {
                        // 危大工程类型
                        dangerTypeEnums: [],
                        // 风险类别
                        riskTypeEnums: [],
                        // 施工状态
                        riskStatusEnums: [],
                        // 工作流对象
                        workflow: []
                    },
                    selectUser: {
                        selectComment: null,
                        comment: null,
                        comments: [],
                        tran: [],
                        activity: "",
                        users: [],
                    },
                    // 审核意见的显示
                    showoPinion: false
                }
            },
            methods: {
                fnSubmit (status) {
                    this.models.model.auditStatus = status
                    this.showoPinion = true
                },
                // 动态表态的多选的显示
                fnCheckboxText (item, arr) {
                    let
                        newArr = arr.filter(row => row.surveyTypeId == item.surveyTypeId),
                        temp = []

                    newArr.map(row => {
                        temp.push(row.value2)
                    })

                    return temp.join(',')
                },
                // 提交
                emitSave () {
                    this.send()
                }
            },
            computed: {
                opinion () {
                    if (this.controlData.workflow && this.controlData.workflow.history && this.controlData.workflow.history.length > 0) {
                        let target = this.controlData.workflow.history.findLast(item => item.taskCode == 'usertask2')

                        if (target) {
                            return target.opinionText
                        } else {
                            return ''
                        }
                    } else {
                        return ''
                    }
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";

.add {
    .list {
        margin: 10px 0;

        @{deep}.pic_upload {
            padding: 0;
        }
    }

    .submit-btn {
        flex: 1;
        margin: 0 10px;
    }

    .file-field {
        flex-direction: column;
    }

    .shzt {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: 600;
    }

    .list-item-content {
        display: flex;
        font-size: 14px;

        > label {
            width: 44%;
            line-height: 18px;
        }

        > span {
            line-height: 18px;
        }
    }

    .space-between {
        .list-item-content {
            display: flex;
            justify-content: space-between;
            font-size: 14px;

            > label {
                width: 38%;
                line-height: 18px;
                color: #888;
            }

            > span {
                line-height: 18px;
                text-align: right;
            }

            &.textarea-item {
                flex-direction: column;

                > label {
                    margin-bottom: 10px;
                    width: auto;
                    line-height: 18px;
                    color: #888;
                }

                @{deep}textarea {
                    padding: 10px;
                    border: 1px solid #dbdbdb;
                    border-radius: 4px;
                }
            }
        }
    }
}
</style>
